import { useColorForName } from 'helpers/color';

import { Box, Tooltip, Typography } from '@mui/material';

import { IMessage } from 'state/chat';

import MessageTime from './time';

interface Props {
  message: IMessage;
  show?: boolean;
  children: JSX.Element;
}

export default function AuthorWithText({ message, children }: Props) {
  const getColorForName = useColorForName();
  const color = getColorForName(message.author, message.authorIsUser);

  return (
    <Box flex={1} display="flex" flexDirection="row" className="author-box">
      <Box className="name-box">
        <Tooltip title={message.author}>
          <Typography
            noWrap
            sx={{
              fontSize: '15.96px',
              fontWeight: 500,
              marginRight: '10px',
              color: '#fff',
              maxWidth: 180
            }}
          >
            {message.author}
          </Typography>
        </Tooltip>
        <MessageTime timestamp={message.createdAt} />
      </Box>
      <Box
        width="2px"
        borderRadius="13px"
        flexShrink={0}
        bgcolor={color}
        mr={2}
      />
      {children}
    </Box>
  );
}
